<template>
  <div class="RecentUpdate">
    <div class="homeModule-title">
      <p>最近更新</p>
      <div>
        <p>更多</p>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 下面内容 -->
    <div class="RecentUpdate-box">
      <!-- 上面内容 -->
      <div class="RecentUpdate-box-top" @click="GoBookDetails">
        <img :src="RecentUpdate.background_img" alt="" />
        <div>
          <van-divider content-position="left">{{
            RecentUpdate.author
          }}</van-divider>
          <p>{{ RecentUpdate.title }}</p>
          <p>{{ RecentUpdate.sub_title }}</p>
          <p>{{ RecentUpdate.status }}</p>
        </div>
      </div>
      <!-- 下面两条内容 -->
      <div class="RecentUpdate-box-bot">
        <div
          class="RecentUpdate-list"
          v-for="item in RecentUpdate.article_list"
          :key="item.duration_str"
          @click="GoSingleSetView(item)"
        >
          <!-- 标题 -->
          <p class="van-ellipsis">{{ item.title }}</p>
          <!-- 时间和头像盒子 -->
          <div>
            <!-- 时间 -->
            <div class="list-timer">
              <van-icon name="clock-o" size="8" />
              <p>{{ item.duration_str }}</p>
              <p>{{ item?.tag }}</p>
            </div>
            <!-- 头像 -->
            <div class="list-headimg">
              <img v-for="img in item.listening" :key="img" :src="img" alt="" />
              <span>在听</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecentUpdate",
  props: ["RecentUpdate"],
  methods: {
    // 跳转到节目
    GoBookDetails() {
      console.log(this.RecentUpdate);
      this.$router.push({
        path: "/BookDetails",
        query: {
          id: this.RecentUpdate.content_id,
        },
      });
    },
    // 跳转到节目单集
    GoSingleSetView(item) {
      // console.log(item);
      this.$router.push({
        path: "/SingleSetView",
        query: {
          article_id: item.article_id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.RecentUpdate {
  .RecentUpdate-box {
    min-height: 17.5rem;
    background-color: white;
    box-shadow: var(--boxsizi);
    padding: 0.75rem;
    box-sizing: border-box;
    .RecentUpdate-box-top {
      display: flex;
      min-height: 7.5rem;

      img {
        width: 6.25rem;
        height: 6.25rem;
      }
      div {
        width: 80%;
        margin-left: 0.625rem;
        position: relative;
        .van-divider {
          width: 100%;
          font-size: 0.8125rem;
          border-color: #333;
          margin: 0 0;
        }
        p {
          line-height: 1rem;
        }
        p:nth-child(2) {
          font-size: 0.875rem;
          margin: 0.375rem 0;
        }
        p:nth-child(3) {
          color: var(--fontcolor);
          font-size: 0.8125rem;
        }
        p:nth-child(4) {
          color: #d0bf90;
          font-size: 0.8125rem;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
    .RecentUpdate-box-bot {
      margin-top: 0.625rem;
      .RecentUpdate-list {
        p {
          height: 1.875rem;
          line-height: 1.875rem;
          font-size: 0.8125rem;
        }
        div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .list-timer {
            p:nth-child(2) {
              color: var(--fontcolor);
            }
            p:nth-child(3) {
              height: 1.25rem;
              font-size: 0.75rem;
              line-height: 1.25rem;
              color: #cfb27a;
              background-color: #f5f2e8;
              margin-left: 0.5rem;
            }
          }
          .list-headimg {
            width: 5.25rem;
            position: relative;
            img {
              width: 1.125rem;
              height: 1.125rem;
              border: 2px solid white;
              border-radius: 50%;
              position: absolute;
              left: 0;
            }
            img:nth-child(2) {
              left: 1rem;
            }
            img:nth-child(3) {
              left: 2rem;
            }
            span {
              color: var(--fontcolor);
              font-size: 0.8125rem;
              position: absolute;
              right: 0;
            }
          }
        }
      }
    }
  }
}
</style>